<template>
    <div>
        <Header title="选择城市"/>
        <div class="search">
            <input type="text" placeholder="请输入城市的中文或者拼音"/>
        </div>
        <div class="list" ref="wrapper">
            <div>
                <div class="area">
                    <div class="title">当前城市</div>
                    <div class="button-list">
                        <div class="button-wrapper">
                            <div class="button">厦门</div>
                        </div>
                    </div>
                </div>
                <div class="area">
                    <div class="title">热门城市</div>
                    <div class="button-list">
                        <div class="button-wrapper"
                        v-for="item of hotCity"
                        :key="item.id">
                            <div class="button">{{item.name}}</div>
                        </div>
                    </div>
                </div>
                <div class="area" v-for="(item, key) of allCity"
                :key="key" :ref="key">
                    <div class="title">{{key}}</div>
                    <div class="item-list">
                        <div class="item border-bottom"
                             v-for="city of item"
                             :key="city.id"
                            @click="handleCityClick(city)">
                            {{city.name}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <Letter class="letter" :allCity="allCity"
        @changeLetter="onLetterChange"></Letter>
    </div>
</template>

<script>
    import Header from './Header'
    import BScroll from 'better-scroll'
    import Letter from './Letter'

    export default {
        name: "City",
        components: {
            Header,
            Letter
        },
        data () {
            return {
                hotCity:[],
                allCity:{}
            }
        },
        mounted () {
            this.scroll = new BScroll(this.$refs.wrapper)
            this.$axios.get('../../static/city.json')
                .then((res)=>{
                    res = res.data
                    if (res.ret && res.data) {
                        const data = res.data
                        this.hotCity = data.hotCities
                        this.allCity = data.cities
                    }
                })
        },
        methods: {
            handleCityClick (item) {

            },
            onLetterChange (letter) {
                if (letter) {
                    const element = this.$refs[letter][0]
                    this.scroll.scrollToElement(element)
                }
            }
        }

    }
</script>

<style lang="stylus" scoped>
    @import "../css/common.styl"
    .search
        width :100%
        height :44px;
        box-sizing :border-box
        background-color :$MainColor
        padding :5px 10px
        input
            box-sizing: border-box
            padding :0 10px
            width :100%
            height :100%
            background-color :#fff
            line-height :40px
            font-size :14px
    .list
        overflow :hidden
        position :absolute
        top :88px
        left: 0px
        right :0px
        bottom :0px
        .title
            width :100%
            height :30px
            line-height :30px
            font-size :14px
            color: #666
            padding-left :10px
            text-align :left
            background-color :#eee
        .button-list
            overflow :hidden
            padding :5px 50px 5px 10px
            .button-wrapper
                float :left
                width :33.333%
                .button
                    text-align :center
                    margin :5px
                    padding :10px 0
                    border: 1px solid #ccc
                    border-radius :4px
        .item-list
            .item
                padding-left :10px
                line-height :40px
                text-align :left
</style>
